<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题(横屏观看)</title>
    <link rel='stylesheet' href='style.css' />
    <link rel='stylesheet' href='pageA.css' />
    <link rel='stylesheet' href='pageB.css' />
    <link rel='stylesheet' href='pageC.css' />
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>
</head>

<body>
    <div id='content'>
        <ul class='content-wrap'>
            <!-- 第一副画面 -->
            <li>
                <!-- 背景 -->
                <div class="a_background">
                    <div class="a_background_top"></div>
                    <div class="a_background_middle"></div>
                    <div class="a_background_botton"></div>
                    </div>
                    <!-- 云 -->
                    <div class="cloudArea">
                        <div class="cloud"></div>
                        <div class="cloud"></div>
                    </div>
                    <!-- 太阳 -->
                    <div id="sun"></div>
            </li>
            <!-- 第二副画面 -->
            <li>
                <!-- 背景图 -->
                <div class="b_background"></div>
                <div class="b_background_preload"></div>
                <!-- 商店 -->
                <div class="shop">
                    <div class="door">
                        <div class="door-left"></div>
                        <div class="door-right"></div>
                    </div>
                    <!-- 灯 -->
                    <div class="lamp"></div>
                </div>
                <!-- 鸟 -->
                <div class="bird"></div>
            </li>
            <!-- 第三副画面 -->
            <li>
                <!-- 背景图 -->
                <div class="c_background">
                    <div class="c_background_top"></div>
                    <div class="c_background_middle"></div>
                    <div class="c_background_botton"></div>
                </div>
                <!-- 小女孩 -->
                <div class="girl"></div>
                <div class="bridge-bottom">
                    <div class="water">
                        <div id="water1" class="water_1"></div>
                        <div id="water2" class="water_2"></div>
                        <div id="water3" class="water_3"></div>
                        <div id="water4" class="water_4"></div>
                    </div>
                </div>
                <!-- 星星 -->
                <ul class="stars">
                    <li class="stars1"></li>
                    <li class="stars2"></li>
                    <li class="stars3"></li>
                    <li class="stars4"></li>
                    <li class="stars5"></li>
                    <li class="stars6"></li>
                </ul>
                <!-- 慕课网logo图 -->
                <div class="logo"></div>
            </li>
        </ul>
        <!-- 飘花 -->
        <div id="snowflake"></div>        
        <div id="boy" class="charector"></div>
    </div>         
    <div class="button">
        <button>开始播放</button>
    </div> 
<script type="text/javascript">
    var swipe = null;
    $(function() {
        swipe = Swipe(container);
        // 音乐配置
        var audioConfig = {
            enable: true, // 是否开启音乐
            playURl: 'media/happy.wav', // 正常播放地址
            cycleURL: 'media/circulation.wav' // 正常循环播放地址
        };

        /////////
        //背景音乐 //
        /////////
        function Hmlt5Audio(url, isloop) {
            var audio = new Audio(url);
            audio.autoPlay = true;
            audio.loop = isloop || false;
            audio.play();
            return {
                end: function(callback) {
                    audio.addEventListener('ended', function() {
                        callback();
                    }, false);
                }
            };
        }

        // 开始
        $("button").click(function() {
            var audio1 = Hmlt5Audio(audioConfig.playURl);
            audio1.end(function() {
                Hmlt5Audio(audioConfig.cycleURL, true);
            });
            Qixi();
            $(this).hide();
        });        
    });
</script>
<script type="text/javascript" src="common.js"></script>      
<script type="text/javascript" src="Swipe.js"></script>
<script type="text/javascript" src="WalkBoy.js"></script>
<script type="text/javascript" src="Qixi.js"></script>
</body>

</html>